﻿<script src="~/Scripts/ChurchControllers/ChildDedicationController.js"></script>
<div class="row" ng-controller="ChildDedicationController">
    <div class="search-bar collapsed">
        <div class="form-group">
            <div class="input-group input-group-lg">
                <input type="text" class="form-control" placeholder="Type to search..." ng-model="search" ng-change="filter()">
                <span class="input-group-btn">
                    <button class="btn btn-square btn-lg btn-default no-shadow close-search-bar" type="button"><i class="zmdi zmdi-close"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="bg-white bs-0 mb-20 widget">
            <ul class="nav nav-pills bg-black bs-inset-primary" role="tablist">
                <li role="presentation" class="pt-15 pb-15 pl-10 pr-20 mb-0">
                    <h3 class="fs-16 lh-1 m-0 text-white text-uppercase">Child Dedication List</h3>
                </li>
                <li class="pull-right pt-15 pb-15 pl-20 pr-10 fs-20 lh-1 mb-0">
                    <ul class="pull-right list-inline fs-16 lh-1 mb-0">
                        <li><a href="javascript:;" class="text-white" ng-click="toggle('add','')"><i class="fa fa-plus-circle"></i></a></li>
                    </ul>
                </li>
            </ul>
            <div class="widget-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <th>Child Name&nbsp;<a ng-click="sort_by('ChildName');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Date Of Birth&nbsp;<a ng-click="sort_by('DateOfBirth');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Date Of Dedication&nbsp;<a ng-click="sort_by('DateOfChildDedication');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Place Of Dedication&nbsp;<a ng-click="sort_by('ChildDedicatedBy');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Dedicated By&nbsp;<a ng-click="sort_by('FamilyId');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Family Name&nbsp;<a ng-click="sort_by('FatherId');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Father Name&nbsp;<a ng-click="sort_by('MotherId');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Mother Name&nbsp;<a ng-click="sort_by('family.Email');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Action&nbsp;</th>
                            </thead>
                            <tbody>
                                <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                                    <td>{{data.ChildName}}</td>
                                    <td>{{data.DateOfBirth}}</td>
                                    <td>{{data.DateOfChildDedication}}</td>
                                    <td>{{data.PlaceOfChildDedication}}</td>
                                    <td>{{data.ChildDedicatedBy}}</td>
                                    <td>{{data.Family.FamilyName}}</td>
                                    <td><span ng-repeat="datas in data.FamilyMembers" ng-if="datas.RelationShip.RelationShipName=='Father'">{{datas.Name}}</span></td>
                                    <td><span ng-repeat="datas in data.FamilyMembers" ng-if="datas.RelationShip.RelationShipName=='Mother'">{{datas.Name}}</span></td>
                                    <td>
                                        <div class="btn-group-sm" role="group" aria-label="Second group">
                                            <button type="button" class="btn btn-info waves-effect" ng-click="toggle('edit',data.ChildDedicationId);"><i class="fa fa-pencil"></i></button>
                                            <button type="button" class="btn btn-danger waves-effect" ng-click="delete(data.Name,data.ChildDedicationId)"><i class="fa fa-trash"></i></button>
                                            <a target="_blank" class="btn btn-success waves-effect" href="Baptism/PrintBaptism?ChildDedicationId={{data.BaptismId}}"><i class="fa fa-print"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12" ng-show="filteredItems == 0">
                        <div class="col-md-12" style="text-align: center;">
                            <h4>No Data</h4>
                        </div>
                    </div>
                </div>
                <div ng-show="filteredItems > 0" style="padding-right: 10px; text-align: right;">
                    <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="ChildDedication" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myAnimationModalLabel">{{title}}</h4>
                </div>
                <form name="fromvalidate" novalidate>
                    <div class="modal-body">
                        <div class="form-group autocomplete" style="text-align: right;">
                            <button class="btn btn-primary" ng-click="selectFamily()">Select Family</button>
                        </div>
                        <div class="form-group">
                            Child Name
                            <input type="text" class="form-control" name="Name" ng-model="ChildDedication.ChildName" maxlength="100" ng-minlength="3" ng-required="true">
                            <p class="error" ng-show="fromvalidate.Name.$error.minlength">Please enter ChildName</p>
                        </div>
                        <div class="form-group">
                            <input type="hidden" value="ChildDedication.FamilyId" />
                            <input type="hidden" value="ChildDedication.MemberId" />
                            <input type="hidden" value="ChildDedication.FatherId" />
                            <input type="hidden" value="ChildDedication.MotherId" />
                        </div>
                        <div class="form-group">
                            Family Name
                            <input type="text" class="form-control" name="FamilyName" ng-model="ChildDedication.FamilyName" ng-required="true">
                        </div>
                        <div class="form-group">
                            If Guardian 
                            <input type="text" class="form-control" name="MotherName" ng-model="ChildDedication.GuardianDetails">
                        </div>
                        <div class="form-group">
                            Present Country
                            <select ng-model="ChildDedication.CountryId"
                                ng-options="obj.CountryId as obj.CountryName for obj in countries"
                                class="form-control" ng-required="true">
                            </select>
                        </div>
                        <div class="form-group">
                            Present State
                            <select ng-model="ChildDedication.StateId"
                                ng-options="obj.StateId as obj.StateName for obj in states"
                                class="form-control"
                                ng-required="true">
                            </select>
                        </div>
                        <div class="form-group">
                            Present City
                            <input type="text" class="form-control" name="PresentCity" ng-model="ChildDedication.PresentCity">
                        </div>
                        <div class="form-group">
                            Present Address
                            <textarea class="form-control" name="PresentAdress" ng-model="ChildDedication.PresentAdress" maxlength="100" ng-required="true"></textarea>
                        </div>
                        <div class="form-group">
                            Present Pincode
                            <input type="text" class="form-control" name="PresentPin" ng-model="ChildDedication.PresentPin" ng-maxlength="6" ng-minlength="6">
                            <p class="error" ng-show="fromvalidate.PresentPin.$error.minlength">Invalid pin</p>
                            <p class="error" ng-show="fromvalidate.PresentPin.$error.maxlength">Invalid pin</p>
                        </div>
                        <div class="form-group">
                            Date Of Birth
                            <input type="text" calendar class="form-control" name="DateOfBirth" ng-model="ChildDedication.DateOfBirth" ng-required="true">
                        </div>
                        <div class="form-group">
                            Gender
                            <select ng-model="ChildDedication.Gender" class="form-control" ng-required="true" name="ChildDedication" ng-options="obj.Gender as obj.GenderName for obj in Genders">
                            </select>
                        </div>
                        <div class="form-group">
                            Year of Membership
                            <input type="text" class="form-control" name="YearOfMemberShip" ng-model="ChildDedication.YearOfMemberShip" ng-required="true">
                        </div>
                        <div class="form-group">
                            Place of Application
                            <input type="text" class="form-control" name="PlaceOfApplication" ng-model="ChildDedication.PlaceOfApplication" ng-required="true">
                        </div>
                        <div class="form-group">
                            Date Of Application
                            <input calendar type="text" class="form-control" name="DateOfApplication" ng-model="ChildDedication.DateOfApplication" ng-required="true">
                        </div>
                        <div class="form-group">
                            Date of Application receiveing
                            <input type="text" calendar class="form-control" name="DateOfRecivingApplication" ng-model="ChildDedication.DateOfRecivingApplication" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label>Application Status</label>
                            <select ng-model="ChildDedication.Status" class="form-control" ng-required="true" name="Status" ng-options="obj.StatusId as obj.StatusName for obj in Status">
                            </select>
                        </div>
                        <div class="form-group">
                            Reason for acceptance / Rejection
                            <input type="text" class="form-control" name="Reason" ng-model="ChildDedication.Reason" ng-required="true">
                        </div>
                        <div class="form-group">
                            Date of Child Dedication
                            <input type="text" calendar class="form-control" name="DateOfChildDedication" ng-model="ChildDedication.DateOfChildDedication" ng-required="true">
                        </div>
                        <div class="form-group">
                            Place Of Child Dedication
                            <input type="text" class="form-control" name="PlaceOfChildDedication" ng-model="ChildDedication.PlaceOfChildDedication" ng-required="true">
                        </div>
                        <div class="form-group">
                            Occation
                            <input type="text" calender class="form-control" name="Occation" ng-model="ChildDedication.Occation" ng-required="true">
                        </div>
                        <div class="form-group">
                            Dedicated by
                            <input type="text" class="form-control" name="ChildDedicatedBy" ng-model="ChildDedication.ChildDedicatedBy" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label>Birth Certificate copy</label>
                            <input type="file" name="fileInput" onchange="angular.element(this).scope().fileChangedBirthCertificate(event)" class="upload" accept="image/*">
                        </div>
                        <div class="form-group">
                            <label>Application Copy</label>
                            <input type="file" name="fileInput" onchange="angular.element(this).scope().fileChangedApplicationCopy(event)" class="upload" accept="image/*">
                        </div>
                        <div class="form-group">
                            <label>Child Image</label>
                            <input type="file" name="fileInput" onchange="angular.element(this).scope().fileChangedChildImage(event)" class="upload" accept="image/*">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save & Print</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="SelectFamily" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Select Family</h4>
                </div>
                <form name="fromvalidate" novalidate>
                    <div class="modal-body">
                        <div class="form-group">
                            Search Family
                            <input type="text" class="form-control" name="Name" ng-model="Searchfamily">
                        </div>
                        <div class="familydetails" ng-repeat="data in FamiliesDetails" ng-click="GetFamilyDetails(data)" ng-class="{activerow : data.FamilyId== selectedidx}">
                            <div class="familydetails-row1">Family / Family head name : {{data.FamilyName}}</div>
                            <div class="familydetails-row2">Address : {{data.PermanentCity}},{{data.PermanentAddress}},{{data.FamilyName}},{{data.FamilyName}},{{data.PermanentPincode}}</div>
                            <div class="familydetails-row2">Family No : {{data.FamilyNo}}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="ChildDedication.FamilyId==undefined">Select</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
